<script src="@/js/gongju/qimenpaipan.js"></script>

<template>
  <div id="app" class="qimenpaipan">
    <div class="margins">
      <!-- 面包屑导航 -->
      <el-affix :offset="80">
        <div class="navigation">
          <Breadcrumb separator=">">
            <BreadcrumbItem to="/">
              <Icon type="ios-home" />
              首页
            </BreadcrumbItem>
            <BreadcrumbItem>
              <Icon type="md-color-wand" />
              工具
            </BreadcrumbItem>
            <BreadcrumbItem>
              <Icon type="md-pin" />
              奇门排盘
            </BreadcrumbItem>
          </Breadcrumb>
        </div>

        <!-- 更多工具 -->
        <div class="prediction">
          更多工具：
          <span class="spacing">
            <router-link to="/gongju/bazi">
              八字排盘
              <Icon type="ios-open-outline" />
            </router-link>
          </span>
          <span class="spacing">
            <router-link to="/gongju/liuyao">
              六爻起卦
              <Icon type="ios-open-outline" />
            </router-link>
          </span>
          <span class="spacing">
            <router-link to="/gongju/meihuayishu">
              梅花易数起卦
              <Icon type="ios-open-outline" />
            </router-link>
          </span>
          <span>
            <router-link to="/gongju/PaiPan">
              紫微斗数排盘
              <Icon type="ios-open-outline" />
            </router-link>
          </span>
        </div>
        <div class="morePrediction">
          <el-dropdown :hide-on-click="true">
            <span class="el-dropdown-link">
              更多工具
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  ><router-link to="/gongju/bazi">
                    八字排盘
                    <Icon type="ios-open-outline" /> </router-link
                ></el-dropdown-item>
                <el-dropdown-item>
                  <router-link to="/gongju/liuyao">
                    六爻起卦
                    <Icon type="ios-open-outline" /> </router-link
                ></el-dropdown-item>
                <el-dropdown-item
                  ><router-link to="/gongju/meihuayishu">
                    梅花易数起卦
                    <Icon type="ios-open-outline" />
                  </router-link>
                </el-dropdown-item>
                <el-dropdown-item>
                  <router-link to="/gongju/PaiPan">
                    紫微斗数排盘
                    <Icon type="ios-open-outline" /> </router-link
                ></el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <!-- 分割线 -->
        <div class="divider">
          <el-divider />
        </div>
      </el-affix>

      <!-- 数据 -->
      <div v-if="!dataDStatus">
        <el-empty description="努力加载中">
          <Button
            v-if="reLoadingButton"
            @click="starts(true)"
            class="reLoading-button"
            >重新加载</Button
          >
          <Button v-else loading class="reLoading-button">加载中...</Button>
        </el-empty>
      </div>
      <div v-if="dataDStatus">
        <!-- ★未排盘 -->
        <div v-show="!dataStatus">
          <el-row :gutter="10">
            <!-- 十二时辰按钮 -->
            <el-col
              :xs="24"
              :sm="24"
              :md="24"
              :lg="6"
              :xl="6"
              style="margin-bottom: 16px"
            >
              <el-card shadow="always" class="shichen">
                <div class="date">
                  <div>
                    公历：
                    {{
                      year +
                      "年" +
                      month +
                      "月" +
                      day +
                      "日" +
                      hour +
                      "时" +
                      minute +
                      "分" +
                      second +
                      "秒"
                    }}
                  </div>
                  <div>
                    农历：
                    {{ nowLunarStr }}
                  </div>
                </div>

                <div
                  class="shichen"
                  v-if="twelveHours && twelveHours.length !== 0"
                >
                  <span v-for="index in twelveHours.length" :key="index">
                    <span v-if="twelveHours[index - 1] === nowDayHourGanZhi">
                      <el-button
                        class="yes"
                        @click="setHourStarts(twelveHoursProve[index - 1].time)"
                      >
                        <span class="title">{{ twelveHours[index - 1] }}</span>
                      </el-button>
                    </span>
                    <span v-else>
                      <el-button
                        class="no"
                        @click="setHourStarts(twelveHoursProve[index - 1].time)"
                      >
                        <span class="title">{{ twelveHours[index - 1] }}</span>
                      </el-button>
                    </span>
                  </span>
                </div>
              </el-card>
            </el-col>

            <!-- 默认排盘数据 -->
            <el-col
              :xs="24"
              :sm="24"
              :md="24"
              :lg="9"
              :xl="9"
              style="margin-bottom: 16px"
            >
              <el-card shadow="always" class="default">
                <div class="jgg">
                  <div class="mark">
                    <div>
                      <el-tag type="primary">{{ dataD.paiPanMark }}</el-tag>
                    </div>
                    <div class="date">
                      <el-tag type="info">
                        <span>公历{{ dataD.solarStr }}</span
                        >&nbsp;&nbsp;&nbsp;&nbsp;
                        <span>农历{{ dataD.lunarStr }}</span>
                      </el-tag>
                    </div>
                  </div>

                  <!-- 转盘 -->
                  <div class="big" style="" v-if="dataD.paiPanType === 0">
                    <div class="small" v-for="index in 9">
                      <div>
                        <div class="yiKong">
                          <b class="yiMa">{{
                            dataD.yiMaGongMark[jgw[index - 1] - 1]
                          }}</b>
                          <b class="xunKong">{{
                            dataD.liuJiaXunKongGongMark[jgw[index - 1] - 1]
                          }}</b>
                        </div>
                      </div>
                      <div>
                        <span class="core" v-if="index !== 5">
                          {{
                            dataD.shenPan[jgw[index - 1] - 1].substring(1, 2)
                          }}
                        </span>
                        <span class="status" v-if="index !== 5">
                          {{ dataD.baShenLuoGongStatus[jgw[index - 1] - 1][1] }}
                        </span>
                      </div>
                      <div>
                        <div class="dun">
                          {{ dataD.jiuDun[jgw[index - 1] - 1].join("") }}
                        </div>
                      </div>
                      <div>
                        <div class="core">
                          {{ dataD.tianPanQiYiToTq[jgw[index - 1] - 1] }}
                        </div>
                        <div class="status">
                          {{
                            dataD.tianPanQiYiLuoGongToTqLink[
                              jgw[index - 1] - 1
                            ][0][1]
                          }}
                        </div>
                        <div class="status">
                          {{
                            dataD.tianPanQiYiLuoGongToTqLink[
                              jgw[index - 1] - 1
                            ][1][1]
                          }}
                        </div>
                      </div>
                      <div>
                        <div class="core">
                          <span
                            v-if="dataD.tianPan[jgw[index - 1] - 1] !== '芮禽'"
                          >
                            <div>
                              {{
                                dataD.tianPan[jgw[index - 1] - 1].substring(
                                  1,
                                  2
                                )
                              }}
                            </div>
                          </span>
                          <span v-else>
                            <div>芮</div>
                          </span>
                        </div>
                        <div class="status">
                          <span
                            v-if="dataD.tianPan[jgw[index - 1] - 1] !== '芮禽'"
                          >
                            {{
                              dataD.jiuXingLuoGongStatus[jgw[index - 1] - 1][1]
                            }}
                          </span>
                          <span class="qin" v-else>禽</span>
                        </div>
                        <div
                          class="status"
                          v-if="dataD.tianPan[jgw[index - 1] - 1] === '芮禽'"
                        >
                          {{
                            dataD.jiuXingLuoGongStatus[
                              jgw[index - 1] - 1
                            ][1].substring(0, 1)
                          }}
                        </div>
                      </div>
                      <div>
                        <div class="core" v-if="index !== 5">
                          {{ dataD.tianPanQiYiExTq[jgw[index - 1] - 1] }}
                        </div>
                        <div class="status">
                          {{
                            dataD.tianPanQiYiLuoGongExTqLink[
                              jgw[index - 1] - 1
                            ][0][1]
                          }}
                        </div>
                        <div class="status">
                          {{
                            dataD.tianPanQiYiLuoGongExTqLink[
                              jgw[index - 1] - 1
                            ][1][1]
                          }}
                        </div>
                      </div>
                      <div class="items marki">
                        <span :class="jgs[index - 1]">
                          {{ jgm[index - 1] }}
                        </span>
                      </div>
                      <div>
                        <div class="core">
                          {{ dataD.renPan[jgw[index - 1] - 1].substring(0, 1) }}
                        </div>
                        <div class="status">
                          {{ dataD.baMenLuoGongStatus[jgw[index - 1] - 1][1] }}
                        </div>
                      </div>
                      <div>
                        <div class="core">
                          {{ dataD.diPan[jgw[index - 1] - 1] }}
                        </div>
                        <div class="status">
                          {{
                            dataD.diPanQiYiLuoGongLink[jgw[index - 1] - 1][0][1]
                          }}
                        </div>
                        <div class="status">
                          {{
                            dataD.diPanQiYiLuoGongLink[jgw[index - 1] - 1][1][1]
                          }}
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- 飞盘 -->
                  <div class="big" style="" v-if="dataD.paiPanType === 1">
                    <div class="small" v-for="index in 9">
                      <div>
                        <div class="yiKong">
                          <b class="yiMa">{{
                            dataD.yiMaGongMark[jgw[index - 1] - 1]
                          }}</b>
                          <b class="xunKong">{{
                            dataD.liuJiaXunKongGongMark[jgw[index - 1] - 1]
                          }}</b>
                        </div>
                      </div>
                      <div>
                        <span class="core">
                          {{
                            dataD.shenPan[jgw[index - 1] - 1].substring(1, 2)
                          }}
                        </span>
                        <span class="status">
                          {{
                            dataD.jiuShenLuoGongStatus[jgw[index - 1] - 1][1]
                          }}
                        </span>
                      </div>
                      <div>
                        <div class="dun">
                          {{ dataD.jiuDun[jgw[index - 1] - 1].join("") }}
                        </div>
                      </div>
                      <div></div>
                      <div>
                        <div class="core">
                          {{
                            dataD.tianPan[jgw[index - 1] - 1].substring(1, 2)
                          }}
                        </div>
                        <div class="status">
                          {{
                            dataD.jiuXingLuoGongStatus[jgw[index - 1] - 1][1]
                          }}
                        </div>
                      </div>
                      <div>
                        <div class="core">
                          {{ dataD.tianPanQiYi[jgw[index - 1] - 1] }}
                        </div>
                        <div class="status">
                          {{
                            dataD.tianPanQiYiLuoGongLink[
                              jgw[index - 1] - 1
                            ][0][1]
                          }}
                        </div>
                        <div class="status">
                          {{
                            dataD.tianPanQiYiLuoGongLink[
                              jgw[index - 1] - 1
                            ][1][1]
                          }}
                        </div>
                      </div>
                      <div class="items marki">
                        <span :class="jgs[index - 1]">
                          {{ jgm[index - 1] }}
                        </span>
                      </div>
                      <div>
                        <div class="core">
                          {{ dataD.renPan[jgw[index - 1] - 1].substring(0, 1) }}
                        </div>
                        <div class="status">
                          {{ dataD.baMenLuoGongStatus[jgw[index - 1] - 1][1] }}
                        </div>
                      </div>
                      <div>
                        <div class="core">
                          {{ dataD.diPan[jgw[index - 1] - 1] }}
                        </div>
                        <div class="status">
                          {{
                            dataD.diPanQiYiLuoGongLink[jgw[index - 1] - 1][0][1]
                          }}
                        </div>
                        <div class="status">
                          {{
                            dataD.diPanQiYiLuoGongLink[jgw[index - 1] - 1][1][1]
                          }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>

            <!-- 选项 -->
            <el-col
              :xs="24"
              :sm="24"
              :md="24"
              :lg="9"
              :xl="9"
              style="margin-bottom: 16px"
            >
              <el-card shadow="never" class="option">
                <div>
                  <input
                    placeholder="请输入姓名（选填）"
                    v-model="name"
                    maxlength="30"
                    class="name"
                  />
                  <el-radio
                    v-model="sex"
                    v-for="item in sexOptions"
                    :label="item.label"
                    :key="item"
                    class="sex"
                  >
                    {{ item.value }}
                  </el-radio>
                </div>
                <div>
                  <input
                    placeholder="请输入占事（选填）"
                    v-model="occupy"
                    maxlength="30"
                    class="occupy"
                  />
                  <el-checkbox
                    class="leap-month"
                    :disabled="dateType !== 1"
                    v-model="leapMonth"
                  >
                    闰月
                  </el-checkbox>
                </div>
                <div class="date timeRange">
                  <el-date-picker
                    :clearable="false"
                    v-model="date"
                    type="datetime"
                    format="YYYY-MM-DD HH:mm:ss"
                    placeholder="请选择日期"
                    class="datepicker"
                    style="width: 46%"
                  />
                  <el-radio-group class="date-type" v-model="dateType">
                    <el-radio-button
                      v-for="item in dateTypeOptions"
                      :label="item.label"
                      :key="item"
                    >
                      {{ item.value }}
                    </el-radio-button>
                  </el-radio-group>
                </div>
                <!-- <div>
                  <el-checkbox v-model="trueSolar"> 真太阳时 </el-checkbox>
                  <span class="address" v-show="trueSolar">
                    地区：
                    <City class="city" v-model="address" show-suffix @on-change="getAddressName" />
                    <el-tooltip placement="top">
                      <template #content>
                        默认为北京市，依然按照标准时间排盘；
                        <br />
                        若选择其他地区，则按真太阳时排盘。
                      </template>
<Icon type="md-information-circle" />
</el-tooltip>
</span>
</div> -->
                <div class="paipan-type">
                  <div class="title">排盘类型：</div>
                  <el-radio
                    class="select"
                    v-model="paiPanType"
                    v-for="item in paiPanTypeOptions"
                    :label="item.label"
                    :key="item.value"
                  >
                    {{ item.value }}
                  </el-radio>
                </div>
                <div class="qimen-type">
                  <div class="title">奇门类型：</div>
                  <el-select class="select" v-model="qiMenType">
                    <el-option
                      v-for="item in qiMenTypeOptions"
                      :label="item.label"
                      :value="item.value"
                      :key="item"
                      :disabled="item.disabled"
                    >
                      <span style="float: left">{{ item.label }}</span>
                      <span
                        v-if="item.value === 3"
                        style="
                          float: right;
                          color: #8492a6;
                          font-size: 12px;
                          margin-right: -15px;
                        "
                      >
                        <Icon type="md-arrow-dropleft-circle" /> 默认
                      </span>
                    </el-option>
                  </el-select>
                  <el-tooltip placement="top">
                    <template #content>
                      <div>
                        <b>年家奇门：</b
                        >主要用于整体的判断，较为宏观和长久。如：经济、形式、东南西北各方的发展状况及自然灾害等。
                      </div>
                      <div>
                        <b>月家奇门：</b
                        >主要用来预测一个月内所发生的事。如：考试、外出做官、经商出行以及玄空风水等方面。
                      </div>
                      <div>
                        <b>日家奇门：</b
                        >可以预测一天内所发生的事。如：日常生活中的各种事件，从小事到大事等。
                      </div>
                      <div>
                        <u
                          ><b>时家奇门：</b
                          >可以预测每个时辰发生的事，应用最为广泛。如：婚姻、疾病、工作、求学考试、经营求财、官司诉讼等。</u
                        >
                      </div>
                      <div>
                        <b>刻家奇门：</b
                        >是在年家奇门、月家奇门、日家奇门、时家奇门的基础上延伸而成，结果相对来说更为精确。
                      </div>
                    </template>
                    <Icon class="tip" type="md-information-circle" />
                  </el-tooltip>
                </div>
                <div class="paipan-system">
                  <div class="title">排盘方法：</div>
                  <el-select class="select" v-model="paiPanSystem">
                    <el-option
                      v-for="item in paiPanSystemOptions"
                      :label="item.label"
                      :value="item.value"
                      :key="item"
                      :disabled="item.disabled"
                    >
                      <span style="float: left">{{ item.label }}</span>
                      <span
                        v-if="item.value === 0"
                        style="
                          float: right;
                          color: #8492a6;
                          font-size: 12px;
                          margin-right: -15px;
                        "
                      >
                        <Icon type="md-arrow-dropleft-circle" /> 默认
                      </span>
                    </el-option>
                  </el-select>
                </div>
                <div class="res">
                  <div class="resetting" @click="resetting">
                    <Icon type="md-sync" />
                    <span>重置</span>
                  </div>
                  <div class="senior" @click="seniorDialog = true">
                    <Icon type="ios-settings" />
                    <span>高级选项</span>
                  </div>
                </div>
                <div>
                  <Button
                    v-if="!startsButton"
                    style="width: 100%"
                    class="starts"
                    @click="starts(false)"
                    >开始排盘</Button
                  >
                  <Button v-else loading style="width: 100%" class="starts"
                    >排盘中...</Button
                  >
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>

        <!-- ★已排盘 -->
        <div v-show="dataStatus">
          <div class="return" @click="dataStatus = false">返回排盘</div>

          <el-row :gutter="10">
            <!-- 十二时辰按钮 -->
            <el-col
              :xs="24"
              :sm="24"
              :md="24"
              :lg="6"
              :xl="6"
              style="margin-bottom: 16px"
            >
              <el-card
                shadow="always"
                class="shichen"
                style="border-radius: 20px; height: 500px"
              >
                <div class="date">
                  <div>
                    公历：
                    {{
                      year +
                      "年" +
                      month +
                      "月" +
                      day +
                      "日" +
                      hour +
                      "时" +
                      minute +
                      "分" +
                      second +
                      "秒"
                    }}
                  </div>
                  <div>
                    农历：
                    {{ nowLunarStr }}
                  </div>
                </div>

                <div
                  class="shichen"
                  v-if="twelveHours && twelveHours.length !== 0"
                >
                  <span v-for="index in twelveHours.length" :key="index">
                    <span v-if="twelveHours[index - 1] === nowDayHourGanZhi">
                      <el-button
                        class="yes"
                        @click="setHourStarts(twelveHoursProve[index - 1].time)"
                      >
                        <span class="title">{{ twelveHours[index - 1] }}</span>
                      </el-button>
                    </span>
                    <span v-else>
                      <el-button
                        class="no"
                        @click="setHourStarts(twelveHoursProve[index - 1].time)"
                      >
                        <span class="title">{{ twelveHours[index - 1] }}</span>
                      </el-button>
                    </span>
                  </span>
                </div>
              </el-card>
            </el-col>

            <!-- 九宫格 -->
            <el-col
              :xs="24"
              :sm="24"
              :md="24"
              :lg="9"
              :xl="9"
              style="margin-bottom: 16px"
            >
              <el-card shadow="always" class="jgg">
                <!-- 转盘 -->
                <div v-if="data.paiPanType === 0">
                  <!-- 详细模式 -->
                  <div class="detailed">
                    <div class="big" v-show="jggMode">
                      <div
                        class="small"
                        v-for="index in 9"
                        :key="index"
                        @click="switchLuoGong(jgw[index - 1])"
                      >
                        <div>
                          <div class="yiKong">
                            <b class="yiMa">{{
                              data.yiMaGongMark[jgw[index - 1] - 1]
                            }}</b>
                            <b class="xunKong">{{
                              data.liuJiaXunKongGongMark[jgw[index - 1] - 1]
                            }}</b>
                          </div>
                        </div>
                        <div>
                          <span class="core" v-if="index !== 5">
                            {{
                              data.shenPan[jgw[index - 1] - 1].substring(1, 2)
                            }}
                          </span>
                          <span class="status" v-if="index !== 5">
                            {{
                              data.baShenLuoGongStatus[jgw[index - 1] - 1][1]
                            }}
                          </span>
                        </div>
                        <div>
                          <div class="dun" v-if="data.jiuDun">
                            {{ data.jiuDun[jgw[index - 1] - 1].join("") }}
                          </div>
                        </div>
                        <div>
                          <div class="core">
                            {{ data.tianPanQiYiToTq[jgw[index - 1] - 1] }}
                          </div>
                          <div class="status">
                            {{
                              data.tianPanQiYiLuoGongToTqLink[
                                jgw[index - 1] - 1
                              ][0][1]
                            }}
                          </div>
                          <div class="status">
                            {{
                              data.tianPanQiYiLuoGongToTqLink[
                                jgw[index - 1] - 1
                              ][1][1]
                            }}
                          </div>
                        </div>
                        <div>
                          <div class="core">
                            <span
                              v-if="data.tianPan[jgw[index - 1] - 1] !== '芮禽'"
                            >
                              <div>
                                {{
                                  data.tianPan[jgw[index - 1] - 1].substring(
                                    1,
                                    2
                                  )
                                }}
                              </div>
                            </span>
                            <span v-else>
                              <div>芮</div>
                            </span>
                          </div>
                          <div class="status">
                            <span
                              v-if="data.tianPan[jgw[index - 1] - 1] !== '芮禽'"
                            >
                              {{
                                data.jiuXingLuoGongStatus[jgw[index - 1] - 1][1]
                              }}
                            </span>
                            <span class="qin" v-else>禽</span>
                          </div>
                          <div
                            class="status"
                            v-if="data.tianPan[jgw[index - 1] - 1] === '芮禽'"
                          >
                            {{
                              data.jiuXingLuoGongStatus[
                                jgw[index - 1] - 1
                              ][1].substring(0, 1)
                            }}
                          </div>
                        </div>
                        <div>
                          <div class="core" v-if="index !== 5">
                            {{ data.tianPanQiYiExTq[jgw[index - 1] - 1] }}
                          </div>
                          <div class="status">
                            {{
                              data.tianPanQiYiLuoGongExTqLink[
                                jgw[index - 1] - 1
                              ][0][1]
                            }}
                          </div>
                          <div class="status">
                            {{
                              data.tianPanQiYiLuoGongExTqLink[
                                jgw[index - 1] - 1
                              ][1][1]
                            }}
                          </div>
                        </div>
                        <div class="marki">
                          <span :class="jgs[index - 1]">
                            {{ jgm[index - 1] }}
                          </span>
                        </div>
                        <div>
                          <div class="core">
                            {{
                              data.renPan[jgw[index - 1] - 1].substring(0, 1)
                            }}
                          </div>
                          <div class="status">
                            {{ data.baMenLuoGongStatus[jgw[index - 1] - 1][1] }}
                          </div>
                        </div>
                        <div>
                          <div class="core">
                            {{ data.diPan[jgw[index - 1] - 1] }}
                          </div>
                          <div class="status">
                            {{
                              data.diPanQiYiLuoGongLink[
                                jgw[index - 1] - 1
                              ][0][1]
                            }}
                          </div>
                          <div class="status">
                            {{
                              data.diPanQiYiLuoGongLink[
                                jgw[index - 1] - 1
                              ][1][1]
                            }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 精简模式 -->
                  <div class="reduce">
                    <div class="big" v-show="!jggMode">
                      <div
                        class="small"
                        v-for="index in 9"
                        :key="index"
                        @click="switchLuoGong(jgw[index - 1])"
                      >
                        <div>
                          <div class="yiKong">
                            <b class="yiMa">{{
                              data.yiMaGongMark[jgw[index - 1] - 1]
                            }}</b>
                            <b class="xunKong">{{
                              data.liuJiaXunKongGongMark[jgw[index - 1] - 1]
                            }}</b>
                          </div>
                        </div>
                        <div>
                          <span class="core" v-if="index !== 5">
                            {{ data.shenPan[jgw[index - 1] - 1] }}
                          </span>
                        </div>
                        <div>
                          <div class="dun" v-if="data.jiuDun">
                            {{ data.jiuDun[jgw[index - 1] - 1].join("") }}
                          </div>
                        </div>
                        <div>
                          <div class="core">
                            {{ data.tianPanQiYiToTq[jgw[index - 1] - 1] }}
                          </div>
                        </div>
                        <div>
                          <div class="core">
                            {{ data.tianPan[jgw[index - 1] - 1] }}
                          </div>
                        </div>
                        <div>
                          <div class="core" v-if="index !== 5">
                            {{ data.tianPanQiYiExTq[jgw[index - 1] - 1] }}
                          </div>
                        </div>
                        <div class="marki">
                          <span :class="jgs[index - 1]">
                            {{ jgm[index - 1] }}
                          </span>
                        </div>
                        <div>
                          <div class="core">
                            {{ data.renPan[jgw[index - 1] - 1] }}
                          </div>
                        </div>
                        <div>
                          <div class="core">
                            {{ data.diPan[jgw[index - 1] - 1] }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 飞盘 -->
                <div v-if="data.paiPanType === 1">
                  <!-- 详细模式 -->
                  <div class="detailed">
                    <div class="big" v-show="jggMode">
                      <div
                        class="small"
                        v-for="index in 9"
                        :key="index"
                        @click="switchLuoGong(jgw[index - 1])"
                      >
                        <div>
                          <div class="yiKong">
                            <b class="yiMa">{{
                              data.yiMaGongMark[jgw[index - 1] - 1]
                            }}</b>
                            <b class="xunKong">{{
                              data.liuJiaXunKongGongMark[jgw[index - 1] - 1]
                            }}</b>
                          </div>
                        </div>
                        <div>
                          <span class="core">
                            {{
                              data.shenPan[jgw[index - 1] - 1].substring(1, 2)
                            }}
                          </span>
                          <span class="status">
                            {{
                              data.jiuShenLuoGongStatus[jgw[index - 1] - 1][1]
                            }}
                          </span>
                        </div>
                        <div>
                          <div class="dun" v-if="data.jiuDun">
                            {{ data.jiuDun[jgw[index - 1] - 1].join("") }}
                          </div>
                        </div>
                        <div></div>
                        <div>
                          <div class="core">
                            {{
                              data.tianPan[jgw[index - 1] - 1].substring(1, 2)
                            }}
                          </div>
                          <div class="status">
                            {{
                              data.jiuXingLuoGongStatus[jgw[index - 1] - 1][1]
                            }}
                          </div>
                        </div>
                        <div>
                          <div class="core">
                            {{ data.tianPanQiYi[jgw[index - 1] - 1] }}
                          </div>
                          <div class="status">
                            {{
                              data.tianPanQiYiLuoGongLink[
                                jgw[index - 1] - 1
                              ][0][1]
                            }}
                          </div>
                          <div class="status">
                            {{
                              data.tianPanQiYiLuoGongLink[
                                jgw[index - 1] - 1
                              ][1][1]
                            }}
                          </div>
                        </div>
                        <div class="marki">
                          <span :class="jgs[index - 1]">
                            {{ jgm[index - 1] }}
                          </span>
                        </div>
                        <div>
                          <div class="core">
                            {{
                              data.renPan[jgw[index - 1] - 1].substring(0, 1)
                            }}
                          </div>
                          <div class="status">
                            {{ data.baMenLuoGongStatus[jgw[index - 1] - 1][1] }}
                          </div>
                        </div>
                        <div>
                          <div class="core">
                            {{ data.diPan[jgw[index - 1] - 1] }}
                          </div>
                          <div class="status">
                            {{
                              data.diPanQiYiLuoGongLink[
                                jgw[index - 1] - 1
                              ][0][1]
                            }}
                          </div>
                          <div class="status">
                            {{
                              data.diPanQiYiLuoGongLink[
                                jgw[index - 1] - 1
                              ][1][1]
                            }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 精简模式 -->
                  <div class="reduce">
                    <div class="big" v-show="!jggMode">
                      <div
                        class="small"
                        v-for="index in 9"
                        :key="index"
                        @click="switchLuoGong(jgw[index - 1])"
                      >
                        <div>
                          <div class="yiKong">
                            <b class="yiMa">{{
                              data.yiMaGongMark[jgw[index - 1] - 1]
                            }}</b>
                            <b class="xunKong">{{
                              data.liuJiaXunKongGongMark[jgw[index - 1] - 1]
                            }}</b>
                          </div>
                        </div>
                        <div>
                          <span class="core">
                            {{ data.shenPan[jgw[index - 1] - 1] }}
                          </span>
                        </div>
                        <div>
                          <div class="dun" v-if="data.jiuDun">
                            {{ data.jiuDun[jgw[index - 1] - 1].join("") }}
                          </div>
                        </div>
                        <div></div>
                        <div>
                          <div class="core">
                            {{ data.tianPan[jgw[index - 1] - 1] }}
                          </div>
                        </div>
                        <div>
                          <div class="core">
                            {{ data.tianPanQiYi[jgw[index - 1] - 1] }}
                          </div>
                        </div>
                        <div class="marki">
                          <span :class="jgs[index - 1]">
                            {{ jgm[index - 1] }}
                          </span>
                        </div>
                        <div>
                          <div class="core">
                            {{ data.renPan[jgw[index - 1] - 1] }}
                          </div>
                        </div>
                        <div>
                          <div class="core">
                            {{ data.diPan[jgw[index - 1] - 1] }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="divider1"><el-divider /></div>

                <div class="option2">
                  <span class="left">
                    <el-button
                      class="button"
                      size="small"
                      @click="shangXiaJu(false)"
                    >
                      <Icon type="ios-undo" />
                      上一局
                    </el-button>
                  </span>

                  <span class="button1">
                    <el-button
                      class="button"
                      size="small"
                      type="info"
                      @click="douZhuanXingYi"
                    >
                      <!-- <Icon type="ios-git-compare" /> -->
                      斗转星移
                      <!-- <Icon type="ios-git-compare" /> -->
                    </el-button>
                  </span>

                  <span class="right">
                    <el-button
                      class="button"
                      size="small"
                      type="info"
                      @click="shangXiaJu(true)"
                    >
                      下一局
                      <Icon type="ios-share-alt" />
                    </el-button>
                  </span>

                  <el-card shadow="always" class="douzhan">
                    <div class="jianju">
                      <b style="vertical-align: 2px">模式：</b>
                      <el-radio
                        v-for="item in douZhuanXingYiModeOptions"
                        v-model="douZhuanXingYiMode"
                        :label="item.label"
                        :key="item"
                        style="width: 70px"
                      >
                        {{ item.value }}
                      </el-radio>
                    </div>
                    <div class="jianju2">
                      <b style="vertical-align: 2px">类型：</b>
                      <el-radio
                        v-for="item in douZhuanXingYiTypeOptions"
                        v-model="douZhuanXingYiType"
                        :label="item.label"
                        :key="item"
                        style="width: 30px"
                      >
                        {{ item.value }}
                      </el-radio>
                    </div>
                  </el-card>
                </div>
              </el-card>
            </el-col>

            <!-- 基础信息 -->
            <el-col
              :xs="24"
              :sm="24"
              :md="24"
              :lg="9"
              :xl="9"
              style="margin-bottom: 16px"
            >
              <el-card shadow="always" class="foundation">
                <div class="paipan-mark">
                  {{ data.paiPanMark }}
                  <span class="switch">
                    <el-switch
                      v-model="jggMode"
                      inline-prompt
                      active-text="详细"
                      inactive-text="精简"
                      style="
                        --el-switch-on-color: #13ce66;
                        --el-switch-off-color: #409eff;
                      "
                    />
                  </span>
                </div>
                <div class="go1">
                  <span class="title">公历</span>
                  {{ data.solarStr }}
                </div>
                <div class="go2">
                  <span class="title">农历</span>
                  {{ data.lunarStr }}
                </div>

                <div class="go1">
                  <span class="title">干支</span>
                  <span v-if="data.baZi">
                    {{ data.baZi.join("&nbsp;&nbsp;") }}
                  </span>
                </div>
                <div class="go2">
                  <span class="title">五行</span>
                  <span v-if="data.baZiWuXing">
                    <span v-for="index in data.baZiWuXing.length" :key="index">
                      <span
                        v-html="WuXingColor2(data.baZiWuXing[index - 1])"
                      ></span
                      >&nbsp;
                    </span>
                  </span>
                </div>

                <div class="go1">
                  <span class="title">旬空</span>
                  <span v-if="data.baZiXunKong">
                    {{ data.baZiXunKong.join("&nbsp;&nbsp;") }}
                  </span>
                </div>
                <div class="go2">
                  <span class="title">纳音</span>
                  <span v-if="data.baZiNaYin">
                    {{ data.baZiNaYin.join("&nbsp;&nbsp;") }}
                  </span>
                </div>

                <div class="go4">
                  <div class="left">
                    <span class="title">节气</span>
                    {{ data.jieQi + data.sanYuan }}
                  </div>
                  <div class="right">
                    <span class="title">局数</span>
                    {{ data.yinYangDun + data.juShu }}局
                  </div>
                </div>

                <div class="go3">
                  <div class="left">
                    <span class="title">值符</span>
                    {{ data.zhiFu }}
                  </div>
                  <div class="right">
                    <span class="title">值使</span>
                    {{ data.zhiShi }}
                  </div>
                </div>

                <div class="go4">
                  <div class="left">
                    <span class="title">旬首</span>
                    {{ data.xunShou }}
                  </div>
                  <div class="right">
                    <span class="title">驿马</span>
                    <span v-if="null !== data.yiMa">{{ data.yiMa }}</span>
                    <span v-else class="null">暂无数据</span>
                  </div>
                </div>

                <div class="go3">
                  <div class="left">
                    <span class="title">天乙</span>
                    {{ data.tianYi }}
                  </div>
                  <div class="right">
                    <span class="title">地乙</span>
                    {{ data.diYi }}
                  </div>
                </div>

                <div class="go4">
                  <div class="left">
                    <span class="title">月将</span>
                    {{ data.yueJiang }}
                  </div>
                  <div class="right">
                    <span class="title">月将神</span>
                    {{ data.yueJiangShen }}
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>

          <!-- 伏吟、反吟、六仪击邢、奇仪入暮 -->
          <el-card shadow="always" class="qita">
            <Tabs class="tabs">
              <TabPane
                :label="'伏吟（' + data.fuYin.length + '个）'"
                icon="ios-aperture"
                v-if="data.fuYin"
              >
                <div v-if="data.fuYin.length !== 0">
                  {{ data.fuYin.join("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;") }}
                </div>
                <div v-else class="null center">暂无数据</div>
              </TabPane>
              <TabPane
                :label="'反吟（' + data.fanYin.length + '个）'"
                icon="ios-aperture-outline"
                v-if="data.fanYin"
              >
                <div v-if="data.fanYin.length !== 0">
                  {{ data.fanYin.join("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;") }}
                </div>
                <div v-else class="null center">暂无数据</div>
              </TabPane>
              <TabPane
                :label="'六仪击邢（' + data.liuYiJiXing.length + '个）'"
                icon="ios-color-filter"
                v-if="data.liuYiJiXing"
              >
                <div v-if="data.liuYiJiXing.length !== 0">
                  {{ data.liuYiJiXing.join("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;") }}
                </div>
                <div v-else class="null center">暂无数据</div>
              </TabPane>
              <TabPane
                :label="'奇仪入墓（' + data.qiYiRuMu.length + '个）'"
                icon="ios-color-filter-outline"
                v-if="data.qiYiRuMu"
              >
                <div v-if="data.qiYiRuMu.length !== 0">
                  {{ data.qiYiRuMu.join("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;") }}
                </div>
                <div v-else class="null center">暂无数据</div>
              </TabPane>
            </Tabs>
          </el-card>

          <!-- 九宫切换按钮 -->
          <!-- <el-affix :offset="100"> -->
          <el-card shadow="always" class="gong-switch">
            <div class="button">
              <span v-for="index in luoGongTitle.length" :key="index">
                <span>
                  <el-button
                    v-if="luoGongIndex === index"
                    size="small"
                    class="yes"
                  >
                    {{ luoGongTitle[index - 1] }}
                  </el-button>
                  <el-button
                    v-else
                    size="small"
                    @click="switchLuoGong(index)"
                    class="no"
                  >
                    {{ luoGongTitle[index - 1] }}
                  </el-button>
                </span>
              </span>
            </div>
          </el-card>
          <!-- </el-affix> -->

          <!-- 单宫数据 -->
          <el-card shadow="never" class="gong-info">
            <div class="dangong" v-if="dataStatus">
              <div class="title">
                <Icon type="md-send" />
                {{ luoGongTitle[luoGongIndex - 1].substring(0, 1) }}宫信息
              </div>
              <div class="divider1"><el-divider border-style="dashed" /></div>

              <!-- 转盘 -->
              <div v-if="data.paiPanType === 0" class="dun">
                <div class="oneGong">
                  <div class="small">
                    <div v-if="null !== data.yiMaGongMark[luoGongIndex - 1]">
                      <div class="yiKong">
                        <b class="yiMa">{{
                          data.yiMaGongMark[luoGongIndex - 1]
                        }}</b>
                        <b class="xunKong">{{
                          data.liuJiaXunKongGongMark[luoGongIndex - 1]
                        }}</b>
                      </div>
                    </div>
                    <div v-else></div>
                    <div>{{ data.shenPan[luoGongIndex - 1] }}</div>
                    <div>
                      <div class="dun">
                        <span
                          v-for="index in data.jiuDun[luoGongIndex - 1].length"
                          :key="index"
                        >
                          {{ data.jiuDun[luoGongIndex - 1][index - 1] }}
                        </span>
                      </div>
                    </div>
                    <div>{{ data.tianPanQiYiToTq[luoGongIndex - 1] }}</div>
                    <div>{{ data.tianPan[luoGongIndex - 1] }}</div>
                    <div v-if="luoGongIndex !== 5">
                      {{ data.tianPanQiYiExTq[luoGongIndex - 1] }}
                    </div>
                    <div v-else></div>
                    <div></div>
                    <div>{{ data.renPan[luoGongIndex - 1] }}</div>
                    <div>{{ data.diPan[luoGongIndex - 1] }}</div>
                  </div>
                  <div class="title-0">
                    {{ luoGongTitle[luoGongIndex - 1] }}
                  </div>
                </div>

                <div
                  class="oneGong1"
                  v-if="jiuGongDiZhi[luoGongIndex - 1].length !== 0"
                >
                  <div class="small">
                    <div v-if="null !== data.yiMaGongMark[luoGongIndex - 1]">
                      <div class="yiKong">
                        <b class="yiMa">{{
                          data.yiMaGongMark[luoGongIndex - 1]
                        }}</b>
                        <b class="xunKong">{{
                          data.liuJiaXunKongGongMark[luoGongIndex - 1]
                        }}</b>
                      </div>
                    </div>
                    <div v-else></div>
                    <div>
                      {{ data.baShenLuoGongStatus[luoGongIndex - 1][1] }}
                    </div>
                    <div>
                      <div class="dun">
                        <span
                          v-for="index in data.jiuDun[luoGongIndex - 1].length"
                          :key="index"
                        >
                          {{ data.jiuDun[luoGongIndex - 1][index - 1] }}
                        </span>
                      </div>
                    </div>
                    <div
                      v-if="
                        undefined !==
                        data.tianPanQiYiLuoGongToTqLink[luoGongIndex - 1][0]
                      "
                    >
                      {{
                        data.tianPanQiYiLuoGongToTqLink[luoGongIndex - 1][0][1]
                      }}
                    </div>
                    <div v-else></div>
                    <div>
                      {{ data.jiuXingLuoGongStatus[luoGongIndex - 1][1] }}
                    </div>
                    <div>
                      {{
                        data.tianPanQiYiLuoGongExTqLink[luoGongIndex - 1][0][1]
                      }}
                    </div>
                    <div></div>
                    <div>
                      {{ data.baMenLuoGongStatus[luoGongIndex - 1][1] }}
                    </div>
                    <div>
                      {{ data.diPanQiYiLuoGongLink[luoGongIndex - 1][0][1] }}
                    </div>
                  </div>
                  <div class="title-1">
                    {{ jiuGongDiZhi[luoGongIndex - 1][0] }}
                  </div>
                </div>

                <div
                  class="oneGong1"
                  v-if="jiuGongDiZhi[luoGongIndex - 1].length > 1"
                >
                  <div class="small">
                    <div v-if="null !== data.yiMaGongMark[luoGongIndex - 1]">
                      <div class="yiKong">
                        <b class="yiMa">{{
                          data.yiMaGongMark[luoGongIndex - 1]
                        }}</b>
                        <b class="xunKong">{{
                          data.liuJiaXunKongGongMark[luoGongIndex - 1]
                        }}</b>
                      </div>
                    </div>
                    <div v-else></div>
                    <div>
                      {{ data.baShenLuoGongStatus[luoGongIndex - 1][1] }}
                    </div>
                    <div>
                      <div class="dun">
                        <span
                          v-for="index in data.jiuDun[luoGongIndex - 1].length"
                          :key="index"
                        >
                          {{ data.jiuDun[luoGongIndex - 1][index - 1] }}
                        </span>
                      </div>
                    </div>
                    <div
                      v-if="
                        undefined !==
                        data.tianPanQiYiLuoGongToTqLink[luoGongIndex - 1][0]
                      "
                    >
                      {{
                        data.tianPanQiYiLuoGongToTqLink[luoGongIndex - 1][0][1]
                      }}
                    </div>
                    <div v-else></div>
                    <div>
                      {{ data.jiuXingLuoGongStatus[luoGongIndex - 1][1] }}
                    </div>
                    <div>
                      {{
                        data.tianPanQiYiLuoGongExTqLink[luoGongIndex - 1][1][1]
                      }}
                    </div>
                    <div></div>
                    <div>
                      {{ data.baMenLuoGongStatus[luoGongIndex - 1][1] }}
                    </div>
                    <div>
                      {{ data.diPanQiYiLuoGongLink[luoGongIndex - 1][1][1] }}
                    </div>
                  </div>
                  <div class="title-1">
                    {{ jiuGongDiZhi[luoGongIndex - 1][1] }}
                  </div>
                </div>

                <div class="yueLing" v-if="luoGongIndex !== 5">
                  <div class="small">
                    <div v-if="null !== data.baGuaWangShuai[luoGongIndex - 1]">
                      {{
                        data.baGuaWangShuai[luoGongIndex - 1][0] +
                        "：" +
                        data.baGuaWangShuai[luoGongIndex - 1][1]
                      }}
                    </div>
                    <div
                      v-if="null !== data.jiuXingWangShuai[luoGongIndex - 1]"
                    >
                      {{
                        data.jiuXingWangShuai[luoGongIndex - 1][0] +
                        "：" +
                        data.jiuXingWangShuai[luoGongIndex - 1][1]
                      }}
                    </div>
                    <div v-if="null !== data.baMenWangShuai[luoGongIndex - 1]">
                      {{
                        data.baMenWangShuai[luoGongIndex - 1][0] +
                        "：" +
                        data.baMenWangShuai[luoGongIndex - 1][1]
                      }}
                    </div>
                  </div>
                  <div class="title-2">月令</div>
                </div>
              </div>

              <!-- 飞盘 -->
              <div v-if="data.paiPanType === 1">
                <div class="oneGong">
                  <div class="small">
                    <div v-if="null !== data.yiMaGongMark[luoGongIndex - 1]">
                      <div class="yiKong">
                        <b class="yiMa">{{
                          data.yiMaGongMark[luoGongIndex - 1]
                        }}</b>
                        <b class="xunKong">{{
                          data.liuJiaXunKongGongMark[luoGongIndex - 1]
                        }}</b>
                      </div>
                    </div>
                    <div v-else></div>
                    <div>{{ data.shenPan[luoGongIndex - 1] }}</div>
                    <div>
                      <div class="dun">
                        <span
                          v-for="index in data.jiuDun[luoGongIndex - 1].length"
                          :key="index"
                        >
                          {{ data.jiuDun[luoGongIndex - 1][index - 1] }}
                        </span>
                      </div>
                    </div>
                    <div></div>
                    <div>{{ data.tianPan[luoGongIndex - 1] }}</div>
                    <div>{{ data.tianPanQiYi[luoGongIndex - 1] }}</div>
                    <div></div>
                    <div>
                      <span v-if="data.renPan[luoGongIndex - 1] === ''">-</span>
                      <span v-else>{{ data.renPan[luoGongIndex - 1] }}</span>
                    </div>
                    <div>{{ data.diPan[luoGongIndex - 1] }}</div>
                  </div>
                  <div class="title-0">
                    {{ luoGongTitle[luoGongIndex - 1] }}
                  </div>
                </div>

                <div
                  class="oneGong1"
                  v-if="jiuGongDiZhi[luoGongIndex - 1].length !== 0"
                >
                  <div class="small">
                    <div v-if="null !== data.yiMaGongMark[luoGongIndex - 1]">
                      <div class="yiKong">
                        <b class="yiMa">{{
                          data.yiMaGongMark[luoGongIndex - 1]
                        }}</b>
                        <b class="xunKong">{{
                          data.liuJiaXunKongGongMark[luoGongIndex - 1]
                        }}</b>
                      </div>
                    </div>
                    <div v-else></div>
                    <div>
                      {{ data.jiuShenLuoGongStatus[luoGongIndex - 1][1] }}
                    </div>
                    <div>
                      <div class="dun">
                        <span
                          v-for="index in data.jiuDun[luoGongIndex - 1].length"
                          :key="index"
                        >
                          {{ data.jiuDun[luoGongIndex - 1][index - 1] }}
                        </span>
                      </div>
                    </div>
                    <div></div>
                    <div>
                      {{ data.jiuXingLuoGongStatus[luoGongIndex - 1][1] }}
                    </div>
                    <div>
                      {{ data.tianPanQiYiLuoGongLink[luoGongIndex - 1][0][1] }}
                    </div>
                    <div></div>
                    <div>
                      <span v-if="data.renPan[luoGongIndex - 1] === '中门'"
                        >-</span
                      >
                      <span v-else>{{
                        data.baMenLuoGongStatus[luoGongIndex - 1][1]
                      }}</span>
                    </div>
                    <div>
                      {{ data.diPanQiYiLuoGongLink[luoGongIndex - 1][0][1] }}
                    </div>
                  </div>
                  <div class="title-1">
                    {{ jiuGongDiZhi[luoGongIndex - 1][0] }}
                  </div>
                </div>

                <div
                  class="oneGong1"
                  v-if="jiuGongDiZhi[luoGongIndex - 1].length > 1"
                >
                  <div class="small">
                    <div v-if="null !== data.yiMaGongMark[luoGongIndex - 1]">
                      <div class="yiKong">
                        <b class="yiMa">{{
                          data.yiMaGongMark[luoGongIndex - 1]
                        }}</b>
                        <b class="xunKong">{{
                          data.liuJiaXunKongGongMark[luoGongIndex - 1]
                        }}</b>
                      </div>
                    </div>
                    <div v-else></div>
                    <div>
                      {{ data.jiuShenLuoGongStatus[luoGongIndex - 1][1] }}
                    </div>
                    <div>
                      <div class="dun">
                        <span
                          v-for="index in data.jiuDun[luoGongIndex - 1].length"
                          :key="index"
                        >
                          {{ data.jiuDun[luoGongIndex - 1][index - 1] }}
                        </span>
                      </div>
                    </div>
                    <div></div>
                    <div>
                      {{ data.jiuXingLuoGongStatus[luoGongIndex - 1][1] }}
                    </div>
                    <div>
                      {{ data.tianPanQiYiLuoGongLink[luoGongIndex - 1][1][1] }}
                    </div>
                    <div></div>
                    <div>
                      <span v-if="data.renPan[luoGongIndex - 1] === '中门'"
                        >-</span
                      >
                      <span v-else>{{
                        data.baMenLuoGongStatus[luoGongIndex - 1][1]
                      }}</span>
                    </div>
                    <div>
                      {{ data.diPanQiYiLuoGongLink[luoGongIndex - 1][1][1] }}
                    </div>
                  </div>
                  <div class="title-1">
                    {{ jiuGongDiZhi[luoGongIndex - 1][1] }}
                  </div>
                </div>

                <div class="yueLing">
                  <div class="small">
                    <div v-if="null !== data.baGuaWangShuai[luoGongIndex - 1]">
                      <span v-if="luoGongIndex === 5">-</span>
                      <span v-else>
                        {{
                          data.baGuaWangShuai[luoGongIndex - 1][0] +
                          "：" +
                          data.baGuaWangShuai[luoGongIndex - 1][1]
                        }}
                      </span>
                    </div>
                    <div
                      v-if="null !== data.jiuXingWangShuai[luoGongIndex - 1]"
                    >
                      {{
                        data.jiuXingWangShuai[luoGongIndex - 1][0] +
                        "：" +
                        data.jiuXingWangShuai[luoGongIndex - 1][1]
                      }}
                    </div>
                    <div v-if="null !== data.baMenWangShuai[luoGongIndex - 1]">
                      <span
                        v-if="
                          data.baMenWangShuai[luoGongIndex - 1][0] === '中门' ||
                          data.baMenWangShuai[luoGongIndex - 1][0] === ''
                        "
                      >
                        -
                      </span>
                      <span v-else>
                        {{
                          data.baMenWangShuai[luoGongIndex - 1][0] +
                          "：" +
                          data.baMenWangShuai[luoGongIndex - 1][1]
                        }}
                      </span>
                    </div>
                  </div>
                  <div class="title-2">月令</div>
                </div>
              </div>

              <div class="divider2"><el-divider border-style="dashed" /></div>

              <!-- 克应、静应、动应 -->
              <Tabs>
                <TabPane
                  label="十干克应"
                  icon="ios-apps"
                  v-if="data.shiGanKeYing"
                >
                  <div v-if="data.shiGanKeYing[luoGongIndex - 1][0] !== ''">
                    <div
                      v-for="sgky in data.shiGanKeYing[luoGongIndex - 1].length"
                      :key="sgky"
                    >
                      {{ data.shiGanKeYing[luoGongIndex - 1][sgky - 1] }}
                    </div>
                  </div>
                  <div v-else class="null center">暂无数据</div>
                </TabPane>
                <TabPane
                  label="八门克应"
                  icon="ios-apps"
                  v-if="data.baMenKeYing"
                >
                  <div v-if="data.baMenKeYing[luoGongIndex - 1][0] !== ''">
                    <div
                      v-for="sgky in data.baMenKeYing[luoGongIndex - 1].length"
                      :key="sgky"
                    >
                      {{ data.baMenKeYing[luoGongIndex - 1][sgky - 1] }}
                    </div>
                  </div>
                  <div v-else class="null center">暂无数据</div>
                </TabPane>
                <TabPane
                  label="八门静应"
                  icon="ios-apps"
                  v-if="data.baMenJingYing"
                >
                  <div v-if="data.baMenJingYing[luoGongIndex - 1][0] !== ''">
                    <div
                      v-for="bmjy in data.baMenJingYing[luoGongIndex - 1]
                        .length"
                      :key="bmjy"
                    >
                      {{ data.baMenJingYing[luoGongIndex - 1][bmjy - 1] }}
                    </div>
                  </div>
                  <div v-else class="null center">暂无数据</div>
                </TabPane>
                <TabPane
                  label="八门动应"
                  icon="ios-apps"
                  v-if="data.baMenDongYing"
                >
                  <div v-if="data.baMenDongYing[luoGongIndex - 1][0] !== ''">
                    <div
                      v-for="bmdy in data.baMenDongYing[luoGongIndex - 1]
                        .length"
                      :key="bmdy"
                    >
                      {{ data.baMenDongYing[luoGongIndex - 1][bmdy - 1] }}
                    </div>
                  </div>
                  <div v-else class="null center">暂无数据</div>
                </TabPane>
                <TabPane
                  label="星门克应"
                  icon="ios-apps"
                  v-if="data.xingMenKeYing"
                >
                  <div v-if="data.xingMenKeYing[luoGongIndex - 1][0] !== ''">
                    <div
                      v-for="xmky in data.xingMenKeYing[luoGongIndex - 1]
                        .length"
                      :key="xmky"
                    >
                      {{ data.xingMenKeYing[luoGongIndex - 1][xmky - 1] }}
                    </div>
                  </div>
                  <div v-else class="null center">暂无数据</div>
                </TabPane>
                <TabPane
                  label="九星时应"
                  icon="ios-apps"
                  v-if="data.jiuXingShiYing"
                >
                  <div v-if="data.jiuXingShiYing[luoGongIndex - 1][0] !== ''">
                    <div
                      v-for="jxsy in data.jiuXingShiYing[luoGongIndex - 1]
                        .length"
                      :key="jxsy"
                    >
                      {{ data.jiuXingShiYing[luoGongIndex - 1][jxsy - 1] }}
                    </div>
                  </div>
                  <div v-else class="null center">暂无数据</div>
                </TabPane>
              </Tabs>
            </div>
          </el-card>
        </div>
      </div>
    </div>

    <!-- 高级选项窗口 -->
    <el-dialog
      v-model="seniorDialog"
      :width="dialog"
      :lock-scroll="false"
      style="border-radius: 26px"
      class="senior-dialog"
    >
      <template #header>
        <span class="header-senior">高级选项</span>
      </template>
      <el-card shadow="always" class="senior-card">
        <div class="t-senior">四柱选项</div>
        <div>
          年柱&nbsp;
          <el-select v-model="yearGanZhiSet" style="width: 87%" size="small">
            <el-option
              v-for="item in yearGanZhiSetOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span style="float: left">
                {{ item.label }}
              </span>
              <span
                v-if="item.value === 1"
                style="
                  float: right;
                  color: #8492a6;
                  font-size: 12px;
                  margin-right: -15px;
                "
              >
                <Icon type="md-arrow-dropleft-circle" /> 默认
              </span>
            </el-option>
          </el-select>
        </div>
        <div>
          月柱&nbsp;
          <el-select v-model="monthGanZhiSet" style="width: 87%" size="small">
            <el-option
              v-for="item in monthGanZhiSetOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span style="float: left">
                {{ item.label }}
              </span>
              <span
                v-if="item.value === 1"
                style="
                  float: right;
                  color: #8492a6;
                  font-size: 12px;
                  margin-right: -15px;
                "
              >
                <Icon type="md-arrow-dropleft-circle" /> 默认
              </span>
            </el-option>
          </el-select>
        </div>
        <div>
          日柱&nbsp;
          <el-select v-model="dayGanZhiSet" style="width: 87%" size="small">
            <el-option
              v-for="item in dayGanZhiSetOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span style="float: left">
                {{ item.label }}
              </span>
              <span
                v-if="item.value === 1"
                style="
                  float: right;
                  color: #8492a6;
                  font-size: 12px;
                  margin-right: -15px;
                "
              >
                <Icon type="md-arrow-dropleft-circle" /> 默认
              </span>
            </el-option>
          </el-select>
        </div>
        <div>
          时柱&nbsp;
          <el-select v-model="hourGanZhiSet" style="width: 87%" size="small">
            <el-option
              v-for="item in hourGanZhiSetOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span style="float: left">
                {{ item.label }}
              </span>
              <span
                v-if="item.value === 0"
                style="
                  float: right;
                  color: #8492a6;
                  font-size: 12px;
                  margin-right: -15px;
                "
              >
                <Icon type="md-arrow-dropleft-circle" /> 默认
              </span>
            </el-option>
          </el-select>
        </div>
      </el-card>
      <el-card shadow="always" class="senior-card">
        <div class="t-senior">通用选项</div>
        <div>
          节气排法&nbsp;
          <el-select v-model="jieQi" style="width: 80%" size="small">
            <el-option
              v-for="item in jieQiOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span style="float: left">
                {{ item.label }}
              </span>
              <span
                v-if="item.value === 0"
                style="
                  float: right;
                  color: #8492a6;
                  font-size: 12px;
                  margin-right: -15px;
                "
              >
                <Icon type="md-arrow-dropleft-circle" /> 默认
              </span>
            </el-option>
          </el-select>
        </div>
        <div>
          值使排法&nbsp;
          <el-select v-model="zhiShi" style="width: 80%" size="small">
            <el-option
              v-for="item in zhiShiOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span style="float: left">
                {{ item.label }}
              </span>
              <span
                v-if="item.value === 0"
                style="
                  float: right;
                  color: #8492a6;
                  font-size: 12px;
                  margin-right: -15px;
                "
              >
                <Icon type="md-arrow-dropleft-circle" /> 默认
              </span>
            </el-option>
          </el-select>
        </div>
      </el-card>
      <el-card
        shadow="always"
        class="senior-card mt-10"
        v-if="paiPanType === 1"
      >
        <div class="t-senior">飞盘奇门选项</div>
        <div>
          人盘排法&nbsp;
          <el-select v-model="renPanFeiZhuan" style="width: 80%" size="small">
            <el-option
              v-for="item in renPanFeiZhuanOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span style="float: left">
                {{ item.label }}
              </span>
              <span v-if="item.value === 1" class="moren"> 默认 </span>
            </el-option>
          </el-select>
        </div>
        <div v-if="renPanFeiZhuan === 0">
          人盘转宫法&nbsp;
          <el-select
            v-model="renPanZhuanGong"
            style="width: 76.5%"
            size="small"
          >
            <el-option
              v-for="item in renPanZhuanGongOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span style="float: left">
                {{ item.label }}
              </span>
              <span v-if="item.value === 0" class="moren"> 默认 </span>
            </el-option>
          </el-select>
        </div>
        <div v-if="renPanFeiZhuan === 1">
          人盘飞宫法&nbsp;
          <el-select v-model="renPanFeiGong" style="width: 76.5%" size="small">
            <el-option
              v-for="item in renPanFeiGongOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span style="float: left">
                {{ item.label }}
              </span>
              <span v-if="item.value === 0" class="moren"> 默认 </span>
            </el-option>
          </el-select>
        </div>
        <div>
          天盘飞宫法&nbsp;
          <el-select v-model="tianPanFeiGong" style="width: 76.5%" size="small">
            <el-option
              v-for="item in tianPanFeiGongOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span style="float: left">
                {{ item.label }}
              </span>
              <span v-if="item.value === 0" class="moren"> 默认 </span>
            </el-option>
          </el-select>
        </div>
        <div>
          神盘飞宫法&nbsp;
          <el-select v-model="shenPanFeiGong" style="width: 76.5%" size="small">
            <el-option
              v-for="item in shenPanFeiGongOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span style="float: left">
                {{ item.label }}
              </span>
              <span v-if="item.value === 1" class="moren"> 默认 </span>
            </el-option>
          </el-select>
        </div>
      </el-card>
      <template #footer>
        <div class="dialog-footer center">
          <Button
            @click="seniorDialog = false"
            style="width: 100%; border-radius: 10px"
          >
            确定
          </Button>
        </div>
      </template>
    </el-dialog>

    <!-- 四柱转日期弹窗 -->
    <el-dialog
      v-model="siZhuDialog"
      :width="dialog"
      :lock-scroll="false"
      style="border-radius: 26px"
      class="sizhu-dialog"
    >
      <template #header>
        <span class="header-sizhu">四柱转日期</span>
      </template>
      <el-card shadow="always" class="sizhu-card">
        <div v-if="siZhuToDateTotal === 0">
          <div>
            年份范围：
            <input
              class="year-input mouse-text"
              placeholder="请输入起始年份"
              v-model="beginYear"
            />
            ~ 至今
            <a class="sizhu-res" @click="beginYear = 1900">重置</a>
          </div>
          <div>
            年柱：
            <el-select
              placement="right"
              v-model="yearGanZhi"
              style="width: 240px"
              placeholder="请选择年柱（年干支）"
              size="small"
            >
              <el-option
                v-for="item in ganZhiOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
                <span style="float: left">
                  {{ item.label }}
                </span>
                <span
                  v-if="item.label === yearGanZhi2"
                  style="
                    float: right;
                    color: #8492a6;
                    font-size: 12px;
                    margin-right: -10px;
                  "
                >
                  <Icon type="md-arrow-dropleft-circle" />
                  当前年柱（年干支）
                </span>
              </el-option>
            </el-select>
          </div>
          <div>
            月柱：
            <el-select
              placement="right"
              v-model="monthGanZhi"
              style="width: 240px"
              placeholder="请选择月柱（月干支）"
              size="small"
            >
              <el-option
                v-for="item in ganZhiOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
                <span style="float: left">
                  {{ item.label }}
                </span>
                <span
                  v-if="item.label === monthGanZhi2"
                  style="
                    float: right;
                    color: #8492a6;
                    font-size: 12px;
                    margin-right: -10px;
                  "
                >
                  <Icon type="md-arrow-dropleft-circle" />
                  当前月柱（月干支）
                </span>
              </el-option>
            </el-select>
          </div>
          <div>
            日柱：
            <el-select
              placement="right"
              v-model="dayGanZhi"
              style="width: 240px"
              placeholder="请选择日柱（日干支）"
              size="small"
            >
              <el-option
                v-for="item in ganZhiOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
                <span style="float: left">
                  {{ item.label }}
                </span>
                <span
                  v-if="item.label === dayGanZhi2"
                  style="
                    float: right;
                    color: #8492a6;
                    font-size: 12px;
                    margin-right: -10px;
                  "
                >
                  <Icon type="md-arrow-dropleft-circle" />
                  当前日柱（日干支）
                </span>
              </el-option>
            </el-select>
          </div>
          <div>
            时柱：
            <el-select
              placement="right"
              v-model="hourGanZhi"
              style="width: 240px"
              placeholder="请选择时柱（时干支）"
              size="small"
            >
              <el-option
                v-for="item in ganZhiOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
                <span style="float: left">
                  {{ item.label }}
                </span>
                <span
                  v-if="item.label === hourGanZhi2"
                  style="
                    float: right;
                    color: #8492a6;
                    font-size: 12px;
                    margin-right: -10px;
                  "
                >
                  <Icon type="md-arrow-dropleft-circle" />
                  当前时柱（时干支）
                </span>
              </el-option>
            </el-select>
          </div>
        </div>
        <div v-else>
          <Table
            height="300"
            size="small"
            highlight-row
            :columns="siZhuToDateColumns"
            :data="siZhuToDate"
          >
            <template #action="{ row, index }">
              <Button type="primary" size="small" @click="setNewDate(row.solar)"
                >选择</Button
              >
            </template>
          </Table>
          <div class="count">
            从公元{{ beginYear2 }}年~至今共&nbsp;{{
              siZhuToDateTotal
            }}&nbsp;条日期 【{{
              yearGanZhi2 +
              "&nbsp;" +
              monthGanZhi2 +
              "&nbsp;" +
              dayGanZhi2 +
              "&nbsp;" +
              hourGanZhi2
            }}】
          </div>
        </div>
      </el-card>
      <template #footer>
        <div class="dialog-footer center">
          <span v-if="siZhuToDateTotal === 0">
            <Button
              v-if="!siZhuButton"
              @click="getSiZhuToDate"
              style="width: 100%; border-radius: 10px"
              >获取日期</Button
            >
            <Button v-else loading style="width: 100%; border-radius: 10px"
              >日期获取中...</Button
            >
          </span>
          <Button
            v-else
            @click="siZhuToDateTotal = 0"
            style="width: 100%; border-radius: 10px"
          >
            重新获取
          </Button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="less" src="@/css/gongju/qimenpaipan.scss"></style>
